<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-02 17:04:52
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-06-01 17:07:02
 * @FilePath: \cxl-h5\src\pages\login\retrieve\Index.vue
-->
<template>
    <section class="retrieve-container">
        <h1>找回密码</h1>
        <BaseInformationVue @update="data.onBaseInformationUpdate" ref="baseRef" register="false" />
        <cxl-button
            class="retrieve-btn"
            type="primary"
            round
            :active="data.active"
            @click="data.onRetrieveConfirm(baseRef)"
            >确定</cxl-button
        >
    </section>
</template>
<script setup lang="ts">
import { ref, reactive, onUnmounted } from 'vue'
import { RetrieveData } from '.'
import BaseInformationVue from '../base/Index.vue'
const baseRef = ref()
const data = reactive(new RetrieveData())
onUnmounted(() => {
    data.countDownInstance.stop()
})
</script>
<style scoped lang="scss">
.retrieve-container {
    box-sizing: border-box;
    padding: var(--cxl-size-20) var(--cxl-size-30);
    height: 100vh;

    background-color: var(--cxl-color-f2f6f8);
    h1 {
        font-size: var(--cxl-size-24);
        margin-bottom: var(--cxl-size-20);
    }
    .retrieve-btn {
        margin-top: var(--cxl-size-30);
    }
}
</style>
